<template>
  <div>
    <div class="Feature">
      <div class="Feature_title">
        <span class="Feature_title_span1">特集</span>
        <span class="Feature_title_span2">查看更多</span>
      </div>
      <div class="Feature_data">
        <div class="Feature_data_list" v-for="(i,index) in FeatureData" :key="index">
          <div class="Feature_data_list_div1" :style="{'backgroundImage': 'url(' + i.url + ')'}">
            <p>{{ i.name }}</p>
          </div>
          <div class="Feature_data_list_div2">{{ i.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Feature",
  data() {
    return {
      FeatureData: [
        {
          url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms2829343/a52f32bf-1e95-43ca-9b50-09b5a73cbb2c.jpg',
          name: '定番衬衫+牛仔裤'
        }, {
          url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms2829353/64284bff-6a22-48e6-866b-eede0306f194.jpg',
          name: '合脚直角袜'
        }, {
          url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms2829340/5762651a-5540-4a98-9064-323f08f0edaa.jpg',
          name: '新品彩妆'
        }, {
          url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms2829351/1a98a7d0-f807-4cdc-a89d-08e918ac9c13.jpg',
          name: '米果膨化'
        },
      ]
    }
  },
  mounted() {

  },
  methods: {}
}
</script>

<style lang="less" scoped>
.Feature {
  width: 78%;
  margin: 0 auto;

  .Feature_title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2%;

    .Feature_title_span1 {
      font-size: 21px;
      color: black;
      font-weight: bold;
    }

    .Feature_title_span2 {
      font-size: 16px;
      color: #60b3fa;
      font-weight: bold;
    }
  }

  .Feature_data {
    display: flex;
    justify-content: space-between;

    .Feature_data_list {
      width: 23%;
      height: auto;
      border-radius: 3px;
      border: 1px solid #e3e2e2;

      .Feature_data_list_div1 {
        background-repeat: no-repeat;
        background-size: 100%;
        height: 166px;
        position: relative;
        p {
          font-size: 20px;
          color: #ffffff;
          font-weight: bold;
          position: absolute;
          bottom: 5%;
          left: 4%;
        }
      }

      .Feature_data_list_div2 {
        height: 40px;
        line-height: 40px;
        padding-left: 4%;
        font-size: 16px;
        color: #000000;
        font-weight: bold;
      }
    }

  }
}
</style>